<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下不动，中间动</title>
    <!--重点：上下给高度  中间top：30px  bottom：40px -->
    <style>
        .tbstop {
            margin: 0 auto;
            width: 1000px;
        }
        .tbstop_top {    
            position: absolute;
            top: 0;
            width: 1000px;
            height: 30px;
            background-color: pink;
        }
        .tbstop_botton {
            position: absolute;
            width: 1000px;
            height: 30px;
            bottom: 0;
            background-color: rgb(196, 138, 138);
        }
        .tbstop_conter {
            position: absolute;
            top: 30px;
            width: 1000px;
            bottom: 30px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="tbstop">
        <div class="tbstop_top"></div>
        <div class="tbstop_conter">
            <pre>
            地方大师傅歌网是国内
            非官方大哥
            但是广泛大使馆
            广泛大使馆反对
            广泛大使馆反对
            受到广泛大使馆和
            房东是个好地方好地方
            地方大师傅歌网是国内
            非官方大哥
            但是广泛大使馆
            广泛大使馆反对
            广泛大使馆反对
            受到广泛大使馆和
            房东是个好地方好地方
            地方大师傅歌网是国内
            非官方大哥
            但是广泛大使馆
            广泛大使馆反对
            广泛大使馆反对
            受到广泛大使馆和
            房东是个好地方好地方
            地方大师傅歌网是国内
            非官方大哥
            但是广泛大使馆
            广泛大使馆反对
            广泛大使馆反对
            受到广泛大使馆和
            房东是个好地方好地方
            地方大师傅歌网是国内
            非官方大哥
            但是广泛大使馆
            广泛大使馆反对
            广泛大使馆反对
            受到广泛大使馆和
            房东是个好地方好地方
            地方大师傅歌网是国内
            非官方大哥
            但是广泛大使馆
            广泛大使馆反对
            广泛大使馆反对
            受到广泛大使馆和
            房东是个好地方好地方
            </pre>
        </div>
        <div class="tbstop_botton"></div>
</div>
</body>
</html>